<template>
  <contentModel :title="showTitle" @close="handleClose">
    <a-form
      ref="formRef"
      class="form-con"
      :model="form"
      layout="vertical"
      :rules="rules"
    >
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :disabled="props.type === 'editor'"
            field="secretLevel"
            label="密级"
            label-col-flex="120px"
            :validate-trigger="['change', 'blur']"
          >
            <secretLevelSelect v-model="form.secretLevel" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            field="machiningCode"
            label="加工内容编码"
            label-col-flex="120px"
          >
            <span>{{ form.machiningCode || '(由系统生成)' }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            field="machiningName"
            label="加工内容名称"
            label-col-flex="120px"
            :validate-trigger="['change', 'blur']"
          >
            <a-input
              v-model="form.machiningName"
              placeholder="请输入加工能容名称"
            /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            field="categoryLv1"
            label="一级品类"
            label-col-flex="120px"
          >
            <a-input
              v-model="form.categoryLv1"
              placeholder="请输入一级品类"
              disabled
            /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            field="categoryLv2"
            label="二级品类"
            disabled
            label-col-flex="120px"
          >
            <a-input
              v-model="form.categoryLv2"
              placeholder="请输入二级品类"
            /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            field="categoryLv3"
            label="三级品类"
            label-col-flex="120px"
            :validate-trigger="['change', 'blur']"
          >
            <categoryName
              v-model="form.categoryLv3"
              :label-value="form.categoryLv3"
              label-name="categoryLv3"
              value-name="categoryLv3Code"
              title="三级品类"
              type="categoryName"
              :default-query="{
                secretLevel: form.secretLevel,
              }"
              @handle-ok="(row) => inputModalHandleOk(row)"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item
            field="machiningDescribe"
            label="加工内容描述"
            label-col-flex="120px"
            ><a-textarea
              v-model="form.machiningDescribe"
              placeholder="最大输入1000个字符"
              allow-clear
              :max-length="1000"
              show-word-limit
          /></a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item field="remarks" label="备注" label-col-flex="120px"
            ><a-textarea
              v-model="form.remarks"
              placeholder="最大输入1000个字符"
              :max-length="1000"
              allow-clear
              show-word-limit
          /></a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button type="secondary" @click="handleClose">取消</a-button>
      <a-button type="primary" @click="handleOk">确认</a-button>
    </template>
  </contentModel>
</template>

<script setup lang="ts">
  import contentModel from '@/common/components/content-model/index.vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import categoryName from '@/common/components/search-modal/categoryName.vue';

  import { ref, defineProps, onMounted, defineEmits } from 'vue';
  import {
    addList,
    updateListData,
    getDateilsData,
  } from '@/api/Basimanagementapi/Basicdatacontent';
  import lodash from 'lodash';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    type: {
      type: String,
      default: 'add', // add || editor
    },
    id: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const map: any = {
    add: '新增',
    editor: '编辑',
  };
  const formRef = ref();

  const showTitle: any = ref(map[props.type] || '');

  const form = ref({
    machiningName: '',
    secretLevel: '',
    categoryLv1: '',
    categoryLv1Code: '',
    categoryLv1Id: '',
    categoryLv2: '',
    categoryLv2Code: '',
    categoryLv2Id: '',
    categoryLv3: '',
    categoryLv3Code: '',
    categoryLv3Id: '',
    machiningDescribe: '',
    remarks: '',
  });

  const rules = {
    secretLevel: [{ required: true, message: '请选择密级' }],
    machiningName: [{ required: true, message: '请输入加工名称' }],
    categoryLv1: [{ required: true, message: '请输入一级品类' }],
    categoryLv2: [{ required: true, message: '请输入二级品类' }],
    categoryLv3: [{ required: true, message: '请输入三级品类' }],
    machiningDescribe: [{ required: true, message: '请输入加工内容' }],
  };
  onMounted(() => {
    getData();
  });
  const getData = async () => {
    if (props.type !== 'editor') {
      return;
    }

    const { data } = await getDateilsData(props.id);

    form.value = data;
  };

  const emit = defineEmits(['close', 'refresh']);

  const handleClose = () => {
    emit('close');
  };
  // 确认
  const handleOk = async () => {
    const verifyStatus = await formRef.value?.validate();
    if (verifyStatus) {
      return;
    }
    console.log(form.value, 'shuju ');
    let resData = {};

    if (props.type === 'add') {
      const res = await addList(form.value);
      resData = res.data;
    } else {
      const res = await updateListData(form.value);
      resData = res.data;
    }
    if (resData) {
      console.log(form.value);
    }
    Message.success('成功');

    emit('refresh');
    handleClose();
  };
  const inputModalHandleOk = (data: any) => {
    const resData = lodash.cloneDeep(data);
    const {
      categoryLv1,
      categoryLv1Code,
      categoryLv1Id,
      parentCategoryName: categoryLv2,
      parentCategoryCode: categoryLv2Code,
      parentId: categoryLv2Id,
      categoryName: categoryLv3,
      categoryLv1Code: categoryLv3Code,
      id: categoryLv3Id,
    } = resData;
    console.log(`output->resData`, resData.value, data);

    form.value = Object.assign(form.value, {
      categoryLv1,
      categoryLv1Code,
      categoryLv1Id,
      categoryLv2,
      categoryLv2Code,
      categoryLv2Id,
      categoryLv3,
      categoryLv3Code,
      categoryLv3Id,
    });
    formRef.value.validateField('categoryLv3');
  };
</script>
